<eda-dialog [inject]="dialog">
  <div body class="grid">

    <div class="col-12 xl:col-4">

      <p-card>
        <div class="grid">
          <form [formGroup]="form" class="form-horizontal form-material">

            <h5 class="headerH5" i18n="@@inputMapTables">Propiedades del mapa</h5>

            <div style="margin-bottom: 0" class="col-12 md:col-12">
              <h6 i18n="@@inputMapURL"> Subir archivo GeoJson (JSON)</h6>
              <app-uploadFile #fileUploader (onFileSaved)="fileLoaded()"></app-uploadFile>
            </div>

            <div style="margin-bottom: 10px" class="col-12 md:col-12">
              <h6 i18n="@@inputMapField"> Campo a usar para vincular el modelo con el mapa</h6>
              <p-dropdown [options]="fields" formControlName="selectedField" placeholder="Selecciona un campo"
                optionLabel="campo" [showClear]="true" optionLabel="label" [style]="{'width':'209px'}" ></p-dropdown>

              <div style="margin-top: 10px">
                <h6 i18n="@@inputMapName"> Nombre del mapa</h6>
                <p><input pInputText type="text" formControlName="mapName" size="30" id="map_name"></p>
              </div>

            </div>
            <div style="margin-bottom: 10px" class="col-12 ui-md-12">
              <span>
                <h6 i18n="@@inputx">Centro del mapa (Latitud, Longitud)</h6>
                <p i18n="@@inputxDescription">Si desconoces las coordenadas del centro las calcularemos automáticamente
                </p>
              </span>
              <p><input pInputText type="text" formControlName="x" size="30" style="margin-right: 2px">
                <input pInputText type="text" formControlName="y" size="30">   
              </p>
            </div>

          </form>
        </div>
      </p-card>
    </div>

    <div class="col-12 xl:col-4">

      <p-card>
        <div class="grid">
          <div class="col-12 md:col-12">
            <h5 class="headerH5" i18n="@@inputMapColumnsText">Vincular columnas al mapa</h5>


            <div style="margin-bottom: 10px">
              <h6 i18n="@@inputMapTables">Tablas</h6>
              <p-dropdown [options]="tables" [(ngModel)]="selectedTable" placeholder="Selecciona una tabla"
                optionLabel="Tabla" [showClear]="true" (onChange)="getColumns()" [style]="{'width':'209px'}"  optionLabel="label"></p-dropdown>
            </div>

            <div style="margin-bottom: 10px">
              <h6 i18n="@@inputMapColumns">Columnas</h6>
              <p-dropdown [options]="columns" [(ngModel)]="selectedColumn" placeholder="Selecciona una columna"
                optionLabel="Columna" [showClear]="true" (onChange)="pushItem()" [style]="{'width':'209px'}" optionLabel="label"></p-dropdown>
            </div>

            <ul>
              <div id="box_wrapper">
                <li *ngFor="let item of linkedColumns">
                  <i class="fa fa-close" style="color: #c0555e;" (click)="deleteLink(item)"></i>&nbsp;&nbsp;
                  {{item.table}}
                  :
                  {{item.col.column_name}}
                </li>
              </div>
            </ul>
          </div>
        </div>
      </p-card>
    </div>
    <div class="col-12 xl:col-4">
      <p-card>
        <div class="grid">
          <div class="col-12 md:col-12">
            <h5 class="headerH5" i18n="@@avaliableMaps">Mapas disponibles</h5>

            <div>
              <ul>
                <li *ngFor="let item of serverMaps">
                  <i class="fa fa-close" style="color: #c0555e;" (click)="deleteMap(item)"></i>&nbsp;&nbsp;
                  {{item.name}}  &nbsp;   {{item.field}} ->
                  <span *ngFor="let el of item.linkedColumns">
                       <br> {{el.table}}  -   {{el.col.display_name.default}}
                    </span>
                </li>
              </ul>
            </div>
          </div>

        </div>
      </p-card>
    </div>

  </div>

  <div footer >

    <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix text-right">
      <button type="button" pButton (click)="saveMap()" class="ui-button" icon="fa fa-check" i18n-label="@@guardarBtn"
        label="Confirmar" id="eda_column_permission_confirmar"></button>
      <button type="button" pButton (click)="closeDialog()" class="p-button-raised p-button-danger" i18n-label="@@cerrarBtn"
        label="Cerrar"></button>
    </div>

  </div>



</eda-dialog>